<!--
* @author wn
* @date 2022/08/08 11:11:00
* @description: 弹出 确认框 组件
* 全局挂载  $confirm({})  或者 函数方式  Confirm({})
* 渲染逻辑 在  confirm.js  中
*
* xtx-button 为全局组件 但是 confirm 的容器是 div不在 .app内
* 所以无法使用全局组件  需要重新导入该组件
!-->
<template>
	<!-- xtx-confirm wrapper 需要同时做动画  transition 包裹 无法实现
   这里 使用原始的  添加类名 实现过渡动画效果 -->
	<div class="xtx-confirm" :class="{ fade }">
		<div class="wrapper" :class="{ fade }">
			<div class="header">
				<h3>{{ title }}</h3>
				<a
					@click="cancelCallback"
					href="javascript:;"
					class="iconfont icon-close-new"
				></a>
			</div>
			<div class="body">
				<i class="iconfont icon-warning"></i>
				<span>{{ message }}</span>
			</div>
			<div class="footer">
				<xtx-button @click="cancelCallback" size="mini" type="gray">
					取消
				</xtx-button>
				<xtx-button @click="confirmCallback" size="mini" type="primary">
					确认
				</xtx-button>
			</div>
		</div>
	</div>
</template>
<script>
import { onMounted, ref } from 'vue'
import XtxButton from './XtxButton.vue'
export default {
	name: 'XtxConfirm',
	props: {
		title: {
			type: String,
			default: '温馨提示',
		},
		message: {
			type: String,
			default: '',
		},
		cancelCallback: Function,
		confirmCallback: Function,
	},
	// 重新导入 不被.app 管理的组件要使用的组件
	components: { XtxButton },
	setup() {
		const fade = ref(false)
		onMounted(() => {
			// 过渡效果 需要在元素创建完成后延时触发才会生效
			setTimeout(() => {
				fade.value = true
			}, 0)
		})
		return { fade }
	},
}
</script>
<style scoped lang="less">
.xtx-confirm {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	z-index: 8888;
	&.fade {
		background: rgba(0, 0, 0, 0.5);
		transition: all 0.6s;
	}
	.wrapper {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -80%);
		opacity: 0;
		width: 400px;
		background: #fff;
		border-radius: 4px;
		&.fade {
			opacity: 1;
			transform: translate(-50%, -50%);
			transition: all 0.6s;
		}
		.header,
		.footer {
			height: 50px;
			line-height: 50px;
			padding: 0 20px;
		}
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			h3 {
				font-weight: normal;
				font-size: 18px;
			}
			a {
				width: 25px;
				height: 25px;
				line-height: 25px;
				border-radius: 50%;
				margin-right: 16px;
				font-size: 20px;
				color: #999;
				border: 1px solid @xtxColor;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
				padding: 0 2px;
				&:hover {
					color: #666;
				}
			}
		}
		.body {
			padding: 20px 40px;
			font-size: 16px;
			.icon-warning {
				color: @priceColor;
				margin-right: 3px;
				// font-size: 16px;
			}
		}
		.footer {
			text-align: right;
			.xtx-button {
				margin-left: 20px;
			}
		}
	}
}
</style>
